<template>
  <div class="Vxe">
    <div v-show="Switch" class="leftTree" ref="leftTree" style="width: 280px">
      <nav-tree @selectRow="selectRow"></nav-tree>
    </div>
    <div class="switch c_pointer">
      <div class="leftSwitch">
        <i
          v-show="Switch === true"
          class="iconfont i-qiehuan-zuo switch-icon"
        ></i>
        <i
          v-show="Switch === false"
          class="iconfont i-qiehuan-you switch-icon"
        ></i>
        <div class="empty-white"></div>
        <div class="switch-fun" @click="Switch = !Switch"></div>
      </div>
    </div>
    <div
      class="treeContent"
      ref="treeContent"
      style="width: calc(100% - 280px)"
    >
      <tree-view :selectRow="Tree.selectRow"></tree-view>
    </div>
  </div>
</template>

<script>
import NavTree from "@/views/VxeTree/components/NavTree";
import TreeView from "@/views/VxeTree/components/TreeView";

export default {
  name: "VxeTree",
  components: { TreeView, NavTree },
  data() {
    return {
      Switch: true,
      Tree: {
        selectRow: {}
      }
    };
  },
  methods: {
    selectRow(row) {
      this.Tree.selectRow = row;
    }
  },
  watch: {
    Switch: {
      immediate: true,
      deep: true,
      handler(value) {
        if (this.$refs["treeContent"]) {
          if (value) {
            this.$refs["treeContent"].style.width = "calc(100% - 280px)";
          } else {
            this.$refs["treeContent"].style.width = "calc(100%)";
          }
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.Vxe {
  width: 100%;
  height: 100%;
  display: flex;

  .leftTree {
    width: 100%;
    height: 100%;
  }

  .switch {
    position: relative;
    width: 0;
    height: 100%;

    .leftSwitch {
      position: absolute;
      top: 50%;
      right: -49px;
      width: 0;
      height: 0;
      border-style: dashed;
      border-width: 24px;
      border-color: transparent;
      border-left-color: rgba(0, 0, 0, 0.1);

      .switch-icon {
        position: absolute;
        top: -11px;
        left: -27px;
        z-index: 25;
        color: rgba(0, 0, 0, 0.2);
      }

      .empty-white {
        position: absolute;
        top: -24px;
        right: 0;
        width: 16px;
        height: 48px;
        background: #ffffff;
        z-index: 0;
      }

      .switch-fun {
        position: absolute;
        top: -24px;
        left: -24px;
        width: 8px;
        height: 48px;
        background: transparent;
        z-index: 40;
      }
    }
  }

  .treeContent {
    width: 100%;
    height: 100%;
  }
}
</style>